<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>bucket管理</title>
    <style>
        .selectBox{
            display: inline-block;
        }
        .selectBox ul{
            position: fixed;
            z-index: 1;
            background: white;
            box-shadow: grey 0 1px 10px -2px;
            max-height: 350px;
            overflow-y: auto;
            display: none;
        }
        .selectBox ul::-webkit-scrollbar {/*滚动条整体样式*/
            width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }
        .selectBox ul::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #535353;
        }
        .selectBox ul::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #EDEDED;
        }
        .selectBox li{
            padding: 10px;
            cursor: pointer;
        }
        .selectBox li:hover{
            background: #E9E7E7;
        }
    </style>
</head>
<body class="layui-body">
<form class="layui-form" style="margin: 10px 20px 10px 0;">
    <div class="layui-form-item">
        <label class="layui-form-label">bucket名称</label>
        <div class="layui-input-block">
            <input id="name" value="${bucket.name!}" type="text" placeholder="输入bucket名称"
                   class="layui-input">
            <input id="oldName" value="${bucket.name!}" type="hidden"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">应用域</label>
        <div class="layui-input-block">
            <input type="text" id="input_server" value="${(bucket.location)!''}" placeholder="请输入应用域(host:port)"
                   class="layui-input" style="width:calc(100% - 115px); display: inline-block;">
            <div class="selectBox">
                <a class="layui-btn layui-btn-primary" id="selectServerBtn">选择应用域</a>
                <ul>
                    <#if nginxServers??>
                    <#list nginxServers as ser>
                    <li value="${ser.name!''}:${((ser.port)!'')?c}">${ser.name!''}:${((ser.port)!'')?c}</li>
                    </#list>
                    </#if>
                </ul>
            </div>
        </div>
    </div>
</form>

<script type="text/javascript">

    //获得表单数据
    function getFromData() {
        var data = {
            name: $("#name").val(),
            oldName: $("#oldName").val(),
            server:$("#input_server").val()
        };
        return data;
    }

    //选择已有负载域按钮事件
    $("#selectServerBtn").click(function(){
        var $selectUl = $(this).parent().find("ul");
        //显示下拉选择框并绑定事件
        if($selectUl.css("display") == "block"){
            $selectUl.css("display", "none");
            $(this).html("选择应用域");
        }else{
            $(this).html("取消选择");
            $selectUl.css("display", "block");
            $selectUl.find("li").click(function(){
                var value = $(this).attr("value");
                $("#input_server").val(value);
                $(this).parent().css("display", "none");
                $(this).parent().parent().find("a").html("选择应用域");
            });
        }
    });

</script>

</body>
</html>